<template>
    <view class="login_root">
        <image
            class="bg"
            src="/static/login/bg_login.png"
            model="widthFix"
        ></image>
        <image
            class="logo"
            src="/static/main/logo.png"
        ></image>
        <view class="app_name">
            用 药 管 理 系 统
        </view>

        <view class="input_box">
            <view class="label_login">账号登录</view>
            <view class="input_info">
                <u-input
                    border="none"
                    v-model="info.name"
                    type="text"
                    placeholder="请输入账号"
                    :showWordLimit="false"
                ></u-input>
            </view>
            <view class="input_info">
                <u-input
                    border="none"
                    v-model="info.pwd"
                    type="text"
                    placeholder="请输入密码"
                    :showWordLimit="false"
                ></u-input>
            </view>
            <view
                class="common_btn label_less"
                @click="toHome"
            >
                登录
            </view>
        </view>

        <view class="btn_box">
            <view class="common_btn text">
                忘记密码
            </view>

            <view class="common_btn text">
                注册账号
            </view>
        </view>

    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            visible: { show: false },
            info: {
                name: undefined,
                pwd: undefined,
            },
        };
    },
    methods: {
        toHome() {
            uni.reLaunch({
                url: "/pages/home/index",
            })
        },
    },
    mounted() { },
    created() { },
};
</script>

<style
    lang="scss"
    scoped
>
.login_root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }

    .logo {
        margin-top: calc(152rpx);
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
    }

    .app_name {
        margin-top: 24rpx;
        height: 56rpx;
        font-size: 38rpx;
        font-weight: 800;
        color: #FFFFFF;
        line-height: 56rpx;
        text-align: center;
    }

    .input_box {
        margin-top: 100rpx;
        width: 670rpx;
        height: 484rpx;

        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        .label_login {
            margin: 40rpx;
            height: 48rpx;
            font-size: 34rpx;
            font-weight: 800;
            color: #346BF8;
            line-height: 48rpx;
        }

        .input_info {
            box-sizing: border-box;
            margin: 0 40rpx;
            height: 82rpx;
            padding-top: 28rpx;
            border-bottom: #eee solid 2rpx;
        }

        .input_info+.input_info {
            margin-top: 24rpx;
        }

        .common_btn {
            margin: 40rpx 64rpx 0;
        }
    }

    .btn_box {
        display: flex;
        width: 100%;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 40rpx;
        padding: 0 60rpx;
    }
}
</style>